<template>
	<view>
		<!-- 用户信息 会员二维码 -->
		<view class="userInfoBox">
			<!-- 用户头像 手机号 -->
			<view class="userInfo" @click="LoginPage">
				<!-- 头像 -->
				<view class="avatar">
					<image class="img" :src="JSON.stringify(userInfo)!='{}'?userInfo.avatar:loginUser.avatar"></image>
				</view>
				<!-- 昵称 手机号 --已登录  立即登录--未登录 -->
				<view class="textBox">
					<!-- 手机号，昵称 -->
					<view class="userNamePhone" v-if="JSON.stringify(userInfo)!='{}'">
						<view class="userName">
						{{userInfo.userName}}
						<u-icon name="arrow-right" size="18"></u-icon>
						</view>
						<view class="phone" v-if="JSON.stringify(userInfo)!='{}'">{{userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</view>
					</view>
					<!-- 立即登录 -->
					<view class="loginText" v-else>{{loginUser.loginText}}</view>
				</view>
			</view>
			<!-- 个人资料 -->
			<view class="myCode" @click="personalHandle">
				<view class="text">个人资料</view>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
		</view>
		<!-- 我的积分 我的活动 我的报修 -->
		<view class="myModular">
			<view class="item" v-for="item in myModularList" :key="item.id">
				<view class="total">
					<u-count-to :startVal="0" :endVal="item.total"></u-count-to>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<!-- 页面图标 一列显示--> 
		<view class="serviceBox">
			<view class="serviceItem" v-for="item in serviceList" :key="item.id" @click="GoToPage(item)">
				<view class="imageBox">
					<image class="img" :src="item.img"></image>
				</view>
				<view class="text">{{item.name}}</view>
			</view>
		</view>
		<!-- 页面图标 多列显示--> 
		<view class="system">
			<view class="systemItem" v-for="item in systemList" :key="item.id" @click="GoToPage(item)">
				<!-- 左边 -->
				<view class="left">
					<view class="imageBox">
						<image class="img" :src="item.img"></image>
					</view>
					<view class="Lefttext">{{item.name}}</view>
				</view>
				<!-- 右边 -->
				<view class="right">
					<uni-icons type="right" size="18" color="#000"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMyActivityGet,getMyRepairGet, getUserProfileGet } from '@/config/api.js'
	import {mapState} from 'vuex'
	import {skipPage} from '@/utils/common.js'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				loginUser:{
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					loginText:'立即登录'
				},
				myModularList:[
					{id:'0',name:'我的积分',total:0},
					{id:'1',name:'我的活动',total:0},
					{id:'2',name:'我的报修',total:0},
				],
				serviceList:[
					{name:'拍照积分', url:'/subpkg/integralVoucher/integralVoucher?type=new',img:'../../static/pageImage/integral.png',id:'1'},
					{name:'每日签到',url:'/subpkg/simplePage/simplePage?title=每日签到',img:'../../static/pageImage/signIn.png',id:'2'},
					{name:'我的预约',url:'../../subpkg/MakeVisitList/MakeVisitList',img:getApp().globalData.iconUrl+'/20220704/7ec14a6326f84ff9b7842e45fb6a26e2.png',id:'3'},
					{name:'积分凭证',url:'/subpkg/partSwiperList/partSwiperList?title=积分凭证',img:'../../static/pageImage/integralList.png',id:'4'},
				],
				systemList:[
					{name:'通知信息',url:'../../subpkg/NoticeActivity/common?title=通知公告',img:getApp().globalData.iconUrl+'/20220704/0a5c9817caa14b01a27327d7bc91a418.png',id:'1'},
					{name:'个人资料',url:'../../subpkg/my-role/my-role?title=我的资料',img:'../../static/pageImage/personalCode.png',id:'2'},
					{name:'联系客服',url:'../../subpkg/simplePage/simplePage?title=其他服务',img:getApp().globalData.iconUrl+'/20220704/39d10fdba3464e72a62028bb6c571a69.png',id:'3'},
				]
			};
		},
		computed:{
			...mapState('m_user',['userInfo'])
		},
		methods:{
			// 把m_user模块中的updateUserInfo函数映射到当前组件中使用
			...mapMutations('m_user',['updateUserInfo']),
			LoginPage(){//点击头像和昵称-手机号
				if(JSON.stringify(this.userInfo)!='{}') return uni.$u.toast('您已登录！')
				skipPage(`/subpkg/simplePage/simplePage?title=登录`)
			},
			GoToPage(item){//页面跳转
			    if(JSON.stringify(this.userInfo)=='{}'){
			    	return uni.$u.toast('您还未登录，请先登录！')
			    }
				skipPage(item.url)
			},
			personalHandle(){//跳转到个人资料页面
				if(JSON.stringify(this.userInfo)=='{}'){
					return uni.$u.toast('您还未登录，请先登录！')
				}
				skipPage('/subpkg/my-role/my-role?title=我的资料')
			},
			getmyModularList(){//获取 我的积分 我的活动 我的报修
				if(JSON.stringify(this.userInfo)!='{}'){
					this.getUserProfilInfo()//我的积分
				}else{
					this.myModularList[0].total=0
					this.myModularList[1].total=0
					this.myModularList[2].total=0
				}
			},
			setUserInfoObj(userRes){
				this.updateUserInfo({
					avatar:userRes.avatar,
					userName:userRes.nickname,
					userId:userRes.id,
					parkId:1,
					sex:userRes.gender,
					customerType:userRes.customerType?userRes.customerType:'会员',//用户类型
					phone:userRes.mobile,
					customerId:userRes.customerId?userRes.customerId:''
				})
			},
			async getUserProfilInfo(){//获取用户积分
				let userRes=await getUserProfileGet()
				if(userRes.code==0){
					this.myModularList[0].total=userRes.data.point
					this.setUserInfoObj(userRes.data)
					this.getMyActivityList(true)//我的活动
					this.getMyRepairList()//我的报修
				}
			},
			async getMyActivityList(Ifauthentication){//获取用户已报名的活动
				let params={
					params:{userId:this.userInfo.userId},
					custom: { Ifauthentication:Ifauthentication }
				}
				let res =await getMyActivityGet(params)
				if(res.code==0){
					this.myModularList[1].total=res.total
				}
			},
			async getMyRepairList(){//获取用户物业报修
				let params={
					params:{parkId:this.userInfo.parkId},
					custom: { Ifauthentication:true }
				}
				let res = await getMyRepairGet(params)
				if(res.code==0){
					this.myModularList[2].total=res.total
				}
			}
		},
		onShow() {
			this.getmyModularList()
		},
	}
</script>

<style lang="scss" scoped>
// 用户信息
.userInfoBox{
	padding:15px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background:#fff;
	border-bottom: 1px solid rgb(238, 238, 238);
	box-shadow: 0px 0px 5px 1px rgba(217, 217, 217, 0.5 );
	// 用户头像 手机号 
	.userInfo{
		display:flex;
		justify-content: space-between;
		// 头像
		.avatar{
			width:70px;
			height:70px;
			border-radius:50%;
			overflow: hidden;
			.img{
				height:100%;
				width:100%;
			}
		}
		// 昵称 手机号 --已登录  立即登录--未登录
		.textBox{
			margin-left:10px;
			display:flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			// 手机号，昵称
			.userNamePhone{
				.userName{
					display:flex;
					align-items: center;
					font-size: 18px;
					margin-bottom: 5px;
				}
				.phone{
					font-size:14px;
				}
			}
			.loginText{
				font-size:22px;
			}
		}
	}
	// 个人资料
	.myCode{
		display: flex;
		align-items: center;
	}
}
//我的积分 我的活动 我的报修
.myModular,.serviceBox,.system{
	margin:15px auto;
	width:710rpx;
	padding:25px 0;
	display:flex;
	justify-content: space-around;
	border: 1px solid rgb(238, 238, 238);
	box-shadow: 0px 1px 8px 1px rgba(167, 167, 167, 0.2 );
	background-color: #fff;
	.item{
		display:flex;
		flex-direction: column;
		align-items: center;
		.total{
			font-size:18px;
			margin-bottom:10px;
		}
		.name{
			font-size:15px;
		}
	}
}
//页面图标 一列显示
.serviceBox{
	.serviceItem{
		.imageBox{
			height:50px;
			width:50px;
			margin-bottom:5px;
			border-radius: 10px;
			.img{
				height:100%;
				width:100%;
			}
		}
		.text{
			font-size:12px;
		}
	}
}
//页面图标 多列显示
.system{
	border: 1px solid rgb(238, 238, 238) !important;
	box-shadow: rgba(217, 217, 217, 0.2) 0px 0px 5px !important;
	flex-direction: column !important;
	padding:0 !important;
	.systemItem{
		display:flex;
		justify-content: space-between;
		align-items: center;
		border-bottom:1px solid #f8f8f8;
		padding:15px;
		.left{
			display:flex;
			align-items: center;
			.imageBox{
				height:25px;
				width:25px;
				overflow: hidden;
				.img{
					height:100%;
					width:100%;
				}
			}
			.Lefttext{
				font-size:14px;
				margin-left:10px;
			}
		}
	}
}
</style>
